<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>财政支付查询系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="<%=path%>/static/layui/css/layui.css"/>
    <script src="<%=path%>/static/iconfont/iconfont.js"></script>
    <script type="text/javascript" src="<%=path%>/static/jquery/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="<%=path%>/static/layui/layui.js"></script>
    <script src="<%=path%>/static/echarts/echarts.js"></script>
    <style>
        .layui-form-label {
            width: 120px;
        }
        .layui-input-block {
            margin-left: 150px;
        }
        th div {
            text-align: center;
        }
        .layui-btn {
            background-color: #16b777;
        }
        .layui-btn-danger {
            background-color: #ff5722;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #16b777;
        }
        .button-container .layui-btn {
            white-space: nowrap;
            flex: 1;
        }

    </style>
</head>
<body>
<div class="layui-container" style="width: 100%;padding: 20px;">
        <div class="layui-row">
            <div class="layui-form">
                <form id="searchForm" class="layui-form" action="" lay-filter="searchForm">
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付单状态</label>
                            <div class="layui-input-block">
                                <select id="zfzt" name="zfzt">
                                    <option value="">全部</option>
                                    <option value="0">待支付</option>
                                    <option value="1">制单成功</option>
                                    <option value="2">制单失败</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">制单时间</label>
                            <div class="layui-input-block">
                                <input id="zdsj" type="text" name="zdsj" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">原始单据类型</label>
                            <div class="layui-input-block">
                                <input id="djlxmc" type="text" name="djlxmc" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">原始单据编号</label>
                            <div class="layui-input-block">
                                <input id="djbh" type="text" name="djbh" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付金额</label>
                            <div class="layui-input-block">
                                <div style="display: flex; gap: 5%;">
                                    <input id="zfjeMin" type="text" name="zfjeMin" placeholder="最小金额" class="layui-input" style="flex: 1;">
                                    <span style="align-self: center; flex-shrink: 0;">-</span>
                                    <input id="zfjeMax" type="text" name="zfjeMax" placeholder="最大金额" class="layui-input" style="flex: 1;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">摘要</label>
                            <div class="layui-input-block">
                                <input id="zy" type="text" name="zy" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否存疑</label>
                            <div class="layui-input-block">
                                <select id="doubt" name="doubt">
                                    <option value="">全部</option>
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">收款人信息</label>
                            <div class="layui-input-block">
                                <input id="skr" type="text" name="skr" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核人</label>
                            <div class="layui-input-block">
                                <input id="auditor" type="text" name="auditor" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">模糊条件</label>
                            <div class="layui-input-block">
                                <input id="extra" type="text" name="extra" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
<%--                    <div class="layui-col-xs3">--%>
<%--                        <div class="layui-form-item">--%>
<%--                            <div class="layui-input-block">--%>
<%--                                <button type="button" class="layui-btn layui-bg-blue" onclick="search()" style="background-color: #004788 !important;">--%>
<%--                                    <i class="layui-icon layui-icon-search"></i>检索--%>
<%--                                </button>--%>
<%--                                <button type="button" class="layui-btn layui-btn-blue" onclick="resetForm()" style="background-color: #ec6337 !important;">--%>
<%--                                    <i class="layui-icon layui-icon-refresh"></i>重置--%>
<%--                                </button>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <div class="button-container">
                                    <button type="button" class="layui-btn layui-bg-blue" onclick="search()" style="background-color: #004788 !important;">
                                        <i class="layui-icon layui-icon-search"></i>检索
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-blue" onclick="resetForm()" style="background-color: #ec6337 !important;">
                                        <i class="layui-icon layui-icon-refresh"></i>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="zfdjlx" value="${key}"/>
                </form>
            </div>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        </div>
</div>
<script>
    let form = layui.form;
    let table = layui.table;
    let layer = layui.layer;
    var laydate = layui.laydate;

    form.render();

    $(function() {
        laydate.render({
            elem: '#zdsj',
            range: true
        });
        search();
        form.render();
    })

    function search() {
        let data = form.val("searchForm");
        table.render({
            method: 'post',
            elem: '#dataTable',
            url: '<%=path%>/api/pageList',
            where: data,
            cellMinWidth: 80,
            loading: true,
            page: true,
            totalRow: true,
            limit: 20,
            limits: [10, 20, 30, 50, 100],
            cols: [[
                {type: 'numbers', width: '4%', minWidth: 30, title: '序号', fixed: 'left'},
                {field: 'id', hide: true, fixed: 'left'},
                {field: 'zfdjlx', width: '10%', minWidth: 100, title: '支付单类型', align: 'center', templet: '#codeTemplate', fixed: 'left'},
                {field: 'zfzt', width: '8%', minWidth: 100, title: '支付单状态', align: 'center', templet: '#zfztTemplate', fixed: 'left'},
                {field: 'zfje', width: '8%', minWidth: 100, title: '支付金额', align: 'right', fixed: 'left', templet: '#zfjeTemplate', totalRow: true},
                {field: 'zdsj', width: '8%', minWidth: 100, title: '制单时间', align: 'center', fixed: 'left'},
                {field: 'djbh', width: '10%', minWidth: 100, title: '原始单据编号', align: 'center', fixed: 'left'},
                {field: 'skr', width: '8%', minWidth: 100, title: '收款人', align: 'center'},
                {field: 'yhzh', width: '10%', minWidth: 100, title: '银行账号', align: 'center', templet: '#yhzhTemplate'},
                {field: 'djlxmc', width: '10%', minWidth: 100, title: 'U8单据类型', align: 'center'},
                {field: 'xmdm', width: '10%', minWidth: 100, title: 'U8项目', align: 'center', templet: '#xmdmTemplate'},
                {field: 'zbzy', width: '10%', minWidth: 100, title: 'U8指标', align: 'center', templet: '#zbzyTemplate'},
                {field: 'ysxmdm', width: '10%', minWidth: 100, title: 'U8预算项目', align: 'center', templet: '#ysxmdmTemplate'},
                {field: 'zjxzdm', width: '10%', minWidth: 100, title: 'U8资金性质', align: 'center', templet: '#zjxzdmTemplate'},
                {field: 'whdm', width: '10%', minWidth: 100, title: 'U8指标文号', align: 'center', templet: '#whdmTemplate'},
                {field: 'sfzfcg', width: '8%', minWidth: 100, title: '是否政府采购', align: 'center', templet: '#sfzfcgTemplate'},
                {field: 'zfbmjjl', width: '10%', minWidth: 100, title: '财政部门经济分类', align: 'center'},
                {field: 'zfzfjjfl', width: '10%', minWidth: 100, title: '财政政府经济分类', align: 'center'},
                {field: 'zfzcgnfl', width: '10%', minWidth: 100, title: '财政支出功能分类', align: 'center'},
                {field: 'zfzjxz', width: '10%', minWidth: 100, title: '财政资金性质', align: 'center'},
                {field: 'zfzblx', width: '10%', minWidth: 100, title: '财政指标类型', align: 'center'},
                {field: 'zfxm', width: '10%', minWidth: 100, title: '财政预算项目', align: 'center'},
                {field: 'zfzbwh', width: '10%', minWidth: 100, title: '财政指标文号', align: 'center'},
                {field: 'zfztbzxx', width: '10%', minWidth: 100, title: '制单状态备注', align: 'center'},
                {field: 'doubt', width: '8%', minWidth: 100, title: '是否存疑', align: 'center', templet: '#doubtTemplate'},
                {field: 'doubtzy', width: '10%', minWidth: 100, title: '存疑摘要', align: 'left'},
                {field: 'auditor', width: '8%', minWidth: 100, title: '审核人', align: 'center'}
            ]],
            done: function (res) {
                // 显示合计行
                if (res.other && res.other.totalZfje !== undefined) {
                    let $totalRow = $('.layui-table-total');
                    if ($totalRow.length > 0) {
                        // 在支付单类型列显示"合计"
                        let $zfdjlxCell = $totalRow.find('td[data-field="zfdjlx"] .layui-table-cell');
                        if ($zfdjlxCell.length > 0) {
                            $zfdjlxCell.html('合计');
                        }

                        // 在支付金额列只显示金额
                        let $zfjeCell = $totalRow.find('td[data-field="zfje"] .layui-table-cell');
                        if ($zfjeCell.length > 0) {
                            $zfjeCell.html(parseFloat(res.other.totalZfje).toLocaleString('zh-CN', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            }));
                        }
                    }
                }

                // 在分页条后面加"导出全部"按钮
                let $page = $('.layui-table-page');
                if ($page.find('.export-all-btn').length === 0) {
                    $page.append(
                        '<button class="layui-btn layui-btn-sm export-all-btn" style="margin-left:10px; background-color: #1E90FF !important;">' +
                        '<i class="layui-icon layui-icon-download-circle" style="font-size:14px;margin-right:3px;"></i>导出' +
                        '</button>'
                    );
                }
            }
        });
    }

    // 导出全部
    $(document).on('click', '.export-all-btn', function () {
        let data = form.val("searchForm");
        let url = '<%=path%>/api/exportAll?' + $.param(data);

        // 用 iframe 下载，不刷新页面
        let $iframe = $('#downloadFrame');
        if ($iframe.length === 0) {
            $iframe = $('<iframe id="downloadFrame" style="display:none"></iframe>');
            $('body').append($iframe);
        }
        $iframe.attr('src', url);

        layer.msg('正在导出，请稍候...', {time: 1500});
    });

    function resetForm() {
        // 清空所有输入框
        $('#searchForm input[type="text"]').val('');

        // 重置所有下拉选择框
        $('#searchForm select').val('');

        // 重新渲染表单
        form.render();

        // 重新执行查询
        search();
    }

    function view(id) {
        layer.open({
            title: "单据明细",
            type: 2, // page 层类型
            anim: -1, // 0-6 的动画形式，-1 不开启
            isOutAnim: false,
            content: "<%=path%>/api/detailPage.html?id=" + id,
            area: ["99%", "99%"],
            shade: 0.6, // 遮罩透明度
            shadeClose: false, // 点击遮罩区域，关闭弹层
            success: function (layero, index) {
                let frameWindow = layero.find('iframe')[0].contentWindow;
                //子窗口关闭父窗口
                frameWindow._parentLayerWindow = window;
            }
        });
    }

</script>
<script type="text/html" id="codeTemplate">
    <a href="JAVASCRIPT:view('{{d.id}}')" style="color: #004788;font-weight: bolder;text-decoration: underline;">{{d.zfdjlx}}</a>
</script>
<script type="text/html" id="zfztTemplate">
    {{#  if(d.zfzt == 0){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" style="background-color: #FFB800 !important;">&emsp;待支付&emsp;</a>
    {{#  } else  if(d.zfzt == 1){ }}
    <a class="layui-btn layui-btn-success layui-btn-xs">&emsp;制单成功&emsp;</a>
    {{#  } else  if(d.zfzt == 2){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs">&emsp;制单失败&emsp;</a>
    {{#  } }}
</script>
<script type="text/html" id="xmdmTemplate">
    {{d.xmdm + ' ' + d.xmmc}}
</script>
<script type="text/html" id="zbzyTemplate">
    {{d.zbid + ' ' + d.zbzy}}
</script>
<script type="text/html" id="ysxmdmTemplate">
    {{d.ysxmdm + ' ' + d.ysxmmc}}
</script>
<script type="text/html" id="zjxzdmTemplate">
    {{d.zjxzdm + ' ' + d.zjxzmc}}
</script>
<script type="text/html" id="whdmTemplate">
    {{d.whdm + ' ' + d.whmc}}
</script>
<script type="text/html" id="sfzfcgTemplate">
    {{#  if(d.zfzt == 0){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs">&emsp;否&emsp;</a>
    {{#  } else  if(d.zfzt == 1){ }}
    <a class="layui-btn layui-btn-succ layui-btn-xs">&emsp;是&emsp;</a>
    {{#  } }}
</script>
<script type="text/html" id="doubtTemplate">
    {{#  if(d.doubt == 1){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs">&emsp;是&emsp;</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-succ layui-btn-xs">&emsp;否&emsp;</a>
    {{#  } }}
</script>
<script type="text/html" id="zfjeTemplate"> {{#
        return parseFloat(d.zfje).toLocaleString('zh-CN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }}
</script>
<script type="text/html" id="yhzhTemplate"> {{#
        var showValue = '';
<%--        // 公务卡申请类型优先显示公务卡号--%>
        if(d.zfdjlx === '公务卡申请') {
        showValue = d.gwkh || d.yhzh || '';
        } else {
<%--        // 其他类型优先显示银行账号--%>
        showValue = d.yhzh || d.gwkh || '';
        }
        return showValue;
    }}
</script>


</body>
</html>
